import React, { Component } from 'react';
import Simditor from 'simditor';
import $ from 'jquery';
import 'simditor/styles/simditor.css';
import './index.less';
//通用的富文本编辑器，依赖jquery

class RichEditor extends Component{
	constructor(props){
		super(props);
	}
	componentDidMount(){
		this.loadEditor()
	}
	componentWillReceiveProps(nextprops){

		if(this.props.defaultDetail !== nextprops.defaultDetail)
			{
				this.simditor.setValue(nextprops.defaultDetail);
			}
	}
	loadEditor(){
		let element = this.refs['textarea'];
		this.simditor = new Simditor({
			textarea : $(element),
			defaultValue: this.props.placeholder || '请输入内容',
			upload: {
				url          : '/manage.product/richtext_img_upload.do',
				defaultImage : '',
				fileKey      : 'upload_file'
			}
		});
		this.bindEditorEvent();
	}
	//初始化富文本编辑器的事件
	bindEditorEvent(){
		this.simditor.on('valuechanged', e=>{
			this.props.onValueChange(this.simditor.getValue())
		})
	}
	render(){
		return (
			<div className="rich-deitor">
				<textarea ref="textarea"></textarea>
			</div>
			);
	}	        
}

export default RichEditor;
